<template>
  <div class="mainbox">
    <div class="topbox">
      <div class="left">
        <el-card>
          <div class="mainbox1">
            <div>
              <div>型号</div>
              <div class="name">ES-NAC-500</div>
            </div>
            <div class="eth">
              <div v-for="i in 6" class="sec">
                <img src="@/assets/cbot/active.png" alt="" width="100%" />
                <div class="font">eth{{ i - 1 }}</div>
              </div>
            </div>
            <div class="eth2">
              <div v-for="i in 2" class="sec">
                <img src="@/assets/cbot/active.png" alt="" width="100%" />
                <div class="font">eth{{ i + 5 }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <div class="right">
        <el-card>
          <div class="mainbox1">
            <!-- <div class="position">
                            设备在线率
                            <div class="part">80%</div>
                        </div> -->
            <div class="pie" ref="left"></div>
            <div class="pie" ref="right"></div>
            <div class="legend">
              <div>
                <img src="@/assets/cbot/r2.png" />
                在线 111
              </div>
              <div>
                <img src="@/assets/cbot/r1.png" />
                离线 111
              </div>
            </div>
            <div class="legend1">
              <div>
                <img src="@/assets/cbot/r2.png" />
                入网 111
              </div>
              <div>
                <img src="@/assets/cbot/r1.png" />
                阻断 111
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="middlebox">
      <div class="left">
        <el-card>
          <div>
            <div class="subtitle">全网设备数：20001</div>
            <div class="line" ref="line"></div>

            <!-- <div class="name">ES-NAC-500</div> -->
          </div>
        </el-card>
      </div>
      <div class="right">
        <el-card>
          <div>
            <div class="subtitle">发现设备</div>
            <div>
              <ul>
                <li v-for="(i, index) in 9">
                  <div class="section">
                    <div style="color: #4286f5">
                      <img :src="imglist[index].url" alt="" width="10px" />
                      192.168.1.100
                    </div>
                    <div>00:2F:3E:33:7F:03 计算机</div>
                    <div>2023-9-10 02:30:15</div>
                    <div>允许入网</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="bottombox">
      <div class="sections" v-for="(i, x) in imglist">
        <div class="img">
          <img :src="i.url" alt="" />
        </div>
        <div>
          <div class="title">{{ i.name }}</div>
          <div class="number">(0)</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  name: '',
  components: {},
  data() {
    return {
      imglist: [
        {
          url: require('@/assets/cbot/0.png'),
          name: 'Windows'
        },
        {
          url: require('@/assets/cbot/1.png'),
          name: 'linux'
        },
        {
          url: require('@/assets/cbot/2.png'),
          name: 'Mac'
        },
        {
          url: require('@/assets/cbot/3.png'),
          name: '安卓'
        },
        {
          url: require('@/assets/cbot/4.png'),
          name: 'IOS'
        },
        {
          url: require('@/assets/cbot/5.png'),
          name: '交换机'
        },
        {
          url: require('@/assets/cbot/6.png'),
          name: '打印机'
        },
        {
          url: require('@/assets/cbot/7.png'),
          name: '路由器'
        },
        {
          url: require('@/assets/cbot/8.png'),
          name: '虚拟机'
        },
        {
          url: require('@/assets/cbot/9.png'),
          name: '网桥'
        },
        {
          url: require('@/assets/cbot/10.png'),
          name: '网关'
        },
        {
          url: require('@/assets/cbot/11.png'),
          name: '调制解调器'
        },
        {
          url: require('@/assets/cbot/12.png'),
          name: 'Nas'
        },
        {
          url: require('@/assets/cbot/13.png'),
          name: 'Unix'
        }
      ]
    };
  },
  methods: {
    getline() {
      var dom = this.$refs.line;
      // console.log(dom)
      var myChart = this.$echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
      });
      var app = {};

      var option;
      option = {
        color: ['#406eff', '#5ccf86', '#37A2FF', '#FF0087', '#FFBF00'],
        title: {},
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['在线', '入网']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: [
              '2022-12-16',
              '2022-12-17',
              '2022-12-18',
              '2022-12-19',
              '2022-12-20',
              '2022-12-21',
              '2022-12-22'
            ]
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '在线',
            type: 'line',
            // stack: 'Total',
            smooth: true,
            data: [140, 232, 101, 264, 90, 340, 250]
          },
          {
            name: '入网',
            type: 'line',
            // stack: 'Total',
            smooth: true,

            data: [120, 282, 111, 234, 220, 340, 310]
          }
        ]
      };
      // if (option && typeof option === 'object') {
      myChart.setOption(option);
      // }
      // myChart.on("click", this.clickFunc);

      window.addEventListener('resize', myChart.resize);
    },
    getpie() {
      var dom = this.$refs.left;
      // console.log(dom)
      var myChart = this.$echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
      });
      var app = {};

      var option;
      //
      option = {
        title: {
          text: '设备在线率',
          bottom: '15rem',
          subtext: '75%',
          textStyle: {
            fontSize: '1.4rem',
            color: 'black',
            fontWeight: 'normal'
          },
          subtextStyle: {
            fontSize: '2rem',
            color: '#5b96f6',
            fontWeight: 'normal'
          },
          left: 'center',
          top: '32%'
        },
        legend: {
          // data: ['在线', '离线'],
          x: 'right', // 图例水平居中
          y: 'bottom' // 图例垂直居上
        },
        angleAxis: {
          max: 100, // 满分
          clockwise: true, // 逆时针
          // 隐藏刻度线
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        radiusAxis: {
          type: 'category',
          // 隐藏刻度线
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        polar: {
          center: ['50%', '50%'],
          radius: '140%' //图形大小
        },
        series: [
          {
            // roundCap: true,
            type: 'bar',
            data: [
              {
                // name: '离线',
                value: 20,
                itemStyle: {
                  normal: {
                    color: '#e6f0f9'
                  }
                }
              }
            ],
            coordinateSystem: 'polar',
            barWidth: '15%',
            barGap: '-100%', // 两环重叠
            z: 2
          },
          {
            // 灰色环
            type: 'bar',
            // name: '在线',
            data: [
              {
                value: 100,
                itemStyle: {
                  color: '#21a5f5'
                }
              }
            ],
            coordinateSystem: 'polar',
            // roundCap: true,
            barWidth: '15%',
            barGap: '-100%', // 两环重叠
            z: 1
          }
        ]
        // color: ['#b3d465']
      };

      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }
      myChart.on('click', this.clickFunc);

      window.addEventListener('resize', myChart.resize);
    },
    getpie1() {
      var dom = this.$refs.right;
      // console.log(dom)
      var myChart = this.$echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
      });
      var app = {};

      var option;
      //
      option = {
        title: {
          text: '设备入网率',
          bottom: '15rem',
          subtext: '75%',
          textStyle: {
            fontSize: '1.4rem',
            color: 'black',
            fontWeight: 'normal'
          },
          subtextStyle: {
            fontSize: '2rem',
            color: '#5b96f6',
            fontWeight: 'normal'
          },
          left: 'center',
          top: '32%'
        },
        legend: {
          // data: ['入网', '阻断'],
          x: 'right', // 图例水平居中
          y: 'bottom' // 图例垂直居上
        },
        angleAxis: {
          max: 100, // 满分
          clockwise: true, // 逆时针
          // 隐藏刻度线
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        radiusAxis: {
          type: 'category',
          // 隐藏刻度线
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        polar: {
          center: ['50%', '50%'],
          radius: '140%' //图形大小
        },
        series: [
          {
            // roundCap: true,
            type: 'bar',
            data: [
              {
                // name: '阻断',
                value: 20,
                itemStyle: {
                  normal: {
                    color: '#e6f0f9'
                  }
                }
              }
            ],
            coordinateSystem: 'polar',
            barWidth: '15%',
            barGap: '-100%', // 两环重叠
            z: 2
          },
          {
            // 灰色环
            type: 'bar',
            // name: '入网',
            data: [
              {
                value: 100,
                itemStyle: {
                  color: '#21a5f5'
                }
              }
            ],
            coordinateSystem: 'polar',
            // roundCap: true,
            barWidth: '15%',
            barGap: '-100%', // 两环重叠
            z: 1
          }
        ]
        // color: ['#b3d465']
      };

      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }
      myChart.on('click', this.clickFunc);

      window.addEventListener('resize', myChart.resize);
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getline();
      this.getpie();
      this.getpie1();
    });
  }
};
</script>
<style lang="less" scoped>
.name {
  font-size: 30px;
  color: #3f86f1;
}

.pie {
  flex: 1;
  height: 150px;
}

.subtitle {
  font-size: 19px;
  color: #313030;
  font-weight: bold;
}

.position {
  position: absolute;
  font-size: 12px;
  transform: scale(0.8);
  color: grey;
  top: 30%;
  left: 6%;
}

.line {
  width: 100%;
  height: 370px;
}

.mainbox {
  background: #f4f4f4;
  height: 100vh;

  .topbox,
  .middlebox {
    display: flex;
  }

  .topbox {
    margin: 0 20px 20px 20px;

    .left {
      margin-top: 20px;
      width: calc(65% - 20px);
      margin-right: 20px;

      .el-card {
        display: flex;
      }

      .mainbox1 {
        display: flex;
        width: 100%;
        height: 150px;
        // flex-direction: column;
        // justify-content: space-around;
      }

      .eth {
        margin-left: 40px;
        height: 150px;
        background-color: #f2f7fb;
        border-radius: 5px;
        display: flex;
        width: 600px;
        align-items: center;

        .sec {
          margin-left: 30px;
          width: calc(16.6% - 34.5px);

          .font {
            text-align: center;
            font-size: 12px;
          }
        }
      }

      .eth2 {
        margin-left: 40px;
        height: 150px;
        background-color: #f2f7fb;
        border-radius: 5px;
        display: flex;
        width: 220px;
        align-items: center;

        .sec {
          margin-left: 30px;
          width: calc(50% - 45px);

          .font {
            text-align: center;
            font-size: 12px;
          }
        }
      }
    }

    .right {
      margin-top: 20px;
      width: 35%;

      .mainbox1 {
        position: relative;
        display: flex;
        width: 100%;
        height: 150px;

        .legend {
          position: absolute;
          right: 52%;
          bottom: 0;
        }

        .legend1 {
          position: absolute;
          right: 2%;
          bottom: 0;
        }
      }
    }
  }

  .middlebox {
    margin: 20px;

    .el-card {
      height: 400px;
    }

    .left {
      width: calc(65% - 20px);
      margin-right: 20px;
      height: 400px;
    }

    .right {
      width: 35%;
      height: 400px;

      ul {
        display: flex;
        height: 320px;
        flex-direction: column;
        justify-content: space-between;
      }

      .section {
        display: flex;
        justify-content: space-between;
      }
    }
  }

  .bottombox {
    display: flex;
    flex-wrap: wrap;

    .sections {
      width: calc(14% - 18px);
      margin-left: 20px;
      margin-bottom: 20px;
      border-radius: 5px;
      display: flex;
      background-color: #fff;
      padding: 20px 30px;

      .img {
        width: 50px;
        // background-color: black;
        margin-right: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .title,
      .number {
        color: #4683df;
      }
    }
  }
}
</style>
